<template>
	<view class="banner" v-if="list.length > 0">
		<swiper :style="{ height: height }" :indicator-dots="indicator" :circular="circular" :autoplay="autoplay"
			interval="3000" :previous-margin="previousMargin" :next-margin="nextMargin" @change="swiperChange">
			<swiper-item v-for="(item, index) in list" :key="index" @click="swiperClick(index)">
				<image :src="item[keyName] || item" mode="aspectFill" style="width: 100%; height: 100%;" />
			</swiper-item>
		</swiper>
	</view>
</template>

<script setup>
	const emit = defineEmits(['swiperClick', 'swiperChange'])

	const props = defineProps({
		// 轮播图列表
		list: {
			type: Array,
			default: () => []
		},
		// 高度
		height: {
			type: String,
			default: '500rpx'
		},
		// 数组中指定对象的目标属性名
		keyName: {
			type: String,
			default: ''
		},
		// 是否显示指示器
		indicator: {
			type: Boolean,
			default: true
		},
		// 圆角
		radius: {
			type: String,
			default: '0'
		},
		circular: {
			type: Boolean,
			default: false
		},
		autoplay: {
			type: Boolean,
			default: true
		},
		previousMargin: {
			type: Number,
			default: 0
		},
		nextMargin: {
			type: Number,
			default: 0
		}
	})

	const swiperClick = (index) => {
		emit('swiperClick', index)
	}

	const swiperChange = ({ detail: { current } }) => {
		emit('swiperChange', current)
	}
</script>

<style lang="scss" scoped>
	.banner {
		width: 100%;

		swiper {
			width: 100%;
		}

		image {
			width: 100%;
			height: 100%;
		}
	}
</style>